import { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../../store/hook";
import { selectList, push, pop, initList, selectIsLoading, init2 } from "../../store/modules/randomNumberList";

export default function RandomNumberList(){
    const dispatch = useAppDispatch();
    const list = useAppSelector(selectList)
    const isLoading = useAppSelector(selectIsLoading)

    useEffect(()=>{
        console.log("useeffect")
        // dispatch(initList());
        dispatch(init2());
    },[])

    return (
        <>
            {isLoading&&"loading"}
            {!isLoading&&(<> <ul>
                {list.map((item,index)=><li key={index}>{item}</li>)}
            </ul>
            <button onClick={()=>dispatch(push())}>generate</button></>)}

           
        </>
    )
}